<template>
	<div class="all">
		<div class="rating-content pl30rem pr30rem pb40rem border-b20" v-for="item in data">
			<div class="layout border-b">
 				<h3 class="fs32rem c333 bold">{{ item.name }}</h3>
				<p>	
					<i class="iconfont icon-xingxing orange" v-for="i in item.judge_star"></i>
	 			
				</p>
			</div>
			<div class="layout-juscon mt30rem">
				<img class="user-img circle" :src="img_url + item.user_icon" alt="">
				<div class="ml20rem flex_1"> 
					<div class="rating-title layout border-b pb30rem ">
						<div class="title-left">
							<div class="flex-left">
								<strong class="fs34rem c333 mr15rem">{{ item.nick }}</strong>
								<span class="fs18rem white pt5rem pb5rem pl30rem pr10rem primary" v-if="item.growth_level == 1"></span>
								<span class="fs18rem white pt5rem pb5rem pl30rem pr10rem intermediate" v-if="item.growth_level == 2"></span>
								<span class="fs18rem white pt5rem pb5rem pl30rem pr10rem advanced" v-if="item.growth_level == 3"></span>
							</div>
							<!-- <p class="fs24rem c999 mt20rem">{{ item.spec_name }}</p> -->
						</div>
						<div class="">
							<p class="fs24rem c999 mb20rem align-center">{{item.time*1000,'yyyy-MM-dd'| formatDate  }}</p>
							<i class="iconfont icon-xingxing orange" v-for="i in item.scores"></i>
						</div>
					</div>
					<p class="fs30rem c333 bold pt30rem pb30rem">{{ item.content }}</p>
					<div class="img-list">
						<ul>
							<li v-for="items in item.image">
								<img class="responsive-img" :src="img_url + items" alt="">
							</li>
						</ul>
					</div>
				</div>					
			</div>
 		</div>
	</div>
</template>

<script>
	import { getEvaluateList } from "@/api/rating"; 
	import $toast from '@/utils/toast';
	import { formatDate } from "@/utils";
	import { InfiniteScroll} from 'mint-ui';
	export default{
		directives:{
			InfiniteScroll
		},
		filters:
		{
			formatDate(time,fmt){
				let date = new Date(time);
				return formatDate(date,fmt);
			}  
		},
		data()
		{
			return{
				data       : [],
				goods_id   : this.$route.query.goods_id,
				judge_id   : this.$route.params.id,
				page_index : 1,
				img_url    : process.env.IMG_URL,
			}
		},
		created()
		{
			this.loadData();
		},
		methods:
		{
			loadData()
			{
				var params = {
					uid      : this.$route.query.uid,
					goods_id : this.goods_id,
					judge_id : this.judge_id,
				}
				getEvaluateList(params).then( res => {
					this.data = res.data;
				})
			}
		}
	}
</script>

<style lang="less">
	.all{
		.rating-content{ 
			h3{
				height: 90/28rem;
				line-height: 90/28rem;
			}
			.user-img{
				width: 88/28rem;
				height: 88/28rem;
				object-fit: cover;
				border-radius: 50%;
			}
			.rating-title{
				.title-left{
					span{
						background: url(../../assets/member/user-grade.png)no-repeat center /100% 100%;
					}
				}
			}
			.img-list{
				ul{
					display: grid;
					grid-template-columns: 1fr 1fr 1fr;
					grid-gap: 0.5rem;
				}
			}
			.comment-btn{
				border: 2px solid #666;
				display: block;
				margin:0 auto;
				margin-top: 40/28rem;
			}
		}
	}
</style>
